<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height:100px;background: red;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>

  var box = document.querySelector(".box")

  // console.dir(box)

  // 赋值式：不能重复绑定相同事件
  // 绑定
  // box.onclick = function(){
  //   console.log(1);
  // }
  // box.onclick = function(){
  //   console.log(2);
  // }
  // 删除
  // box.onclick = null;

  // 监听式：能重复绑定相同事件
  // 绑定：为了将来能够被删除，需要提前创建事件处理函数，通过函数名，绑定到事件
  // box.addEventListener("click", fn)
  // function fn(){
  //   console.log(1)
  // }
  // box.addEventListener("click", function(){
  //   console.log(2)
  // })
  // 删除：删除事件时，一定要删除和绑定时相同的函数名
  // box.removeEventListener("click", fn)


  // box.attachEvent("onclick", function(){
  //   console.log(1)
  // })

  // console.log( box.attachEvent )

  function addEvent(ele, type, cb){
    if( ele.attachEvent ){
      ele.attachEvent("on"+type, cb);
    }else{
      ele.addEventListener(type, cb);
    }
  }
  
  function removeEvent(ele, type, cb){
    if( ele.attachEvent ){
      ele.detachEvent("on"+type, cb);
    }else{
      ele.removeEventListener(type, cb);
    }
  }

  addEvent(box, "click", f1);
  function f1(){
    console.log(1);
  }
  addEvent(box, "click", function(){
    console.log(2);
  })
  removeEvent(box, "click", f1);

</script>
</html>